import { messages } from "share/common";
import React, { Component } from "react";
import { Menu, Spin, Affix, Icon } from "antd";
import SVGIcon from "components/SVGIcon";
import debounce from "lodash.debounce";

class SetOfBooksComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKeys: [],
      moreLoading: false,
    };
    this.onSelect = debounce(this.onSelect, 300);
  }

  componentWillMount() {}

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  componentWillReceiveProps(nextProps) {}

  componentWillUnmount() {}

  //点击具体菜单
  handleClick = ({ key }) => {
    const { selectedKeys } = this.state;
    const { data } = this.props;
    const item = data.content.find((dataItem) => dataItem.id === key);
    if (selectedKeys[0] === key) {
      selectedKeys[0] = undefined;
      this.onSelect();
    } else {
      selectedKeys[0] = key;
      this.onSelect(item);
    }
    this.setState({ selectedKeys });
  };

  onSelect = (item) => {
    const { onSelect } = this.props;
    onSelect && onSelect("setOfBooksId", item);
  };

  setSelectedKeys = (selectedKeys, shouldScroll) => {
    this.setState({ selectedKeys }, this.handleScroll);
  };

  handleScroll = () => {
    const target = document.querySelector(".set-of-books-company-list-menu .ant-menu-item-selected");
    if (target) {
      document.querySelector(".menu-scroll-area-scroll").scrollTop = target.offsetTop;
    }
  };

  handleEdit = (e, record) => {
    e.stopPropagation();
    const { onEdit } = this.props;
    onEdit && onEdit("edit-set-of-book", { setOfBooksId: record.setOfBooksId });
  };

  setMoreLoading = (moreLoading) => {
    const { onGetMore } = this.props;
    if (moreLoading) {
      onGetMore && onGetMore("SET_OF_BOOK");
    }
    this.setState({ moreLoading });
  };

  //渲染账套列表
  renderSetOfBooksList = (list) => {
    const { selectedKeys } = this.state;
    return list.map((item) => {
      return (
        <Menu.Item key={item.id} data={item}>
          <div className="menu-wrap">
            <div className="menu-title">
              <div className="set-of-books-company-title">{item.setOfBooksName}</div>
              <div
                className="menu-edit"
                onClick={(e) => {
                  this.handleEdit(e, item);
                }}
              >
                <SVGIcon type={"new-edit-icon"} />
              </div>
            </div>
            <div className="set-of-books-company-tip">
              {messages("basic-5.key137") /*账套编码*/}：{item.setOfBooksCode}
            </div>
            {selectedKeys[0] === item.id && (
              <div>
                <div className="set-of-books-company-tip">
                  {messages("basic-5.key139") /*会计期编码*/}：{item.periodSetCode}
                </div>
                <div className="set-of-books-company-tip">
                  {messages("basic-5.key143") /*科目表编码*/}：{item.accountSetCode}
                </div>
                <div className="set-of-books-company-tip">
                  {messages("common.base.currency") /*本位币*/}：{item.functionalCurrencyCode}
                </div>
              </div>
            )}
            <div className="set-of-books-company-tip">
              <span>{messages("common.column.status") /*状态*/}：</span>
              <span className={item.enabled ? "active" : "forbid"}>
                {item.enabled ? messages("basic-5.key569") /*开启*/ : messages("common.status.disable") /*禁用*/}
              </span>
            </div>
          </div>
        </Menu.Item>
      );
    });
  };

  render() {
    const { selectedKeys, moreLoading } = this.state;
    const { data = [], loading = false } = this.props;

    return (
      <div className="left-set-of-books">
        <Affix
          offsetTop={0}
          target={() => {
            return document.querySelector(".left-set-of-books");
          }}
        >
          <div className="title-and-count-box left-title-box">
            <div className={"set-of-books-company-title"}>{messages("basic-5.key11") /*账套*/}</div>
            <div className={"set-of-books-company-tip"}>
              {messages("basic-5.key975", { arg1: data.totalElements || "-" }) /*共{arg1}条*/}
            </div>
          </div>
        </Affix>
        <Spin spinning={loading}>
          <div className="menu-scroll-area menu-scroll-area-scroll">
            <Menu
              className="set-of-books-company-list-menu"
              onClick={this.handleClick}
              selectedKeys={selectedKeys}
              mode="inline"
              style={{ width: 300 }}
            >
              {this.renderSetOfBooksList(data && data.content)}
            </Menu>
            {/*{data && data.content && data.content.length > 0 && (*/}
            {/*  <div*/}
            {/*    onClick={() => {*/}
            {/*      if (data.totalElements > data.content.length) {*/}
            {/*        this.setMoreLoading(true);*/}
            {/*      }*/}
            {/*    }}*/}
            {/*    className={`load-more-text ${data.totalElements > data.content.length ? "hover" : ""}`}*/}
            {/*  >*/}
            {/*    {moreLoading ? (*/}
            {/*      <Icon type="loading" />*/}
            {/*    ) : data.totalElements > data.content.length ? (*/}
            {/*      messages('basic-5.key948')*/}
            {/*    ) : (*/}
            {/*      messages('common.no.more')*/}
            {/*    )}*/}
            {/*  </div>*/}
            {/*)}*/}
            {data && data.totalElements === 0 && (
              <div className={`load-more-text`}>{messages("common.empty.text") /*暂无数据*/}</div>
            )}
          </div>
        </Spin>
      </div>
    );
  }
}

SetOfBooksComp.propTypes = {};

export default SetOfBooksComp;
